<template>
  <div>
    <ul class="BookDire">
      <li v-for="(item,index) in bookdirection" :key="index">
        <p v-if="index!==0"><a href="">{{ item }}</a></p>
        <span v-else><img :src="item" alt=""></span>
      </li>
    </ul>
<!--    <el-card class="box-card">-->
<!--      <div slot="header" class="clearfix">-->
<!--        <span>卡片名称</span>-->
<!--        <el-button style="float: right; padding: 3px 0" type="text">操作按钮</el-button>-->
<!--      </div>-->
<!--      <div v-for="o in 4" :key="o" class="text item">-->
<!--        {{'列表内容 ' + o }}-->
<!--      </div>-->
<!--    </el-card>-->
  </div>
</template>

<script>
export default {
  name: "BookDirection",
  data(){
    return{

    }
  },
  props:{
    bookdirection:{
      type:Array,
      required:true
    }
  }
}
</script>

<style scoped>
.BookDire{
  width:248px;
  height: 124px;
  border-right: 1px lightgray solid;
  float: left;
}
.BookDire li{
  text-align: center;
  line-height: 25px;
}

.text {
  font-size: 14px;
}

.item {
  margin-bottom: 18px;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}
.clearfix:after {
  clear: both
}

.box-card {
  width: 480px;
}
</style>